<template>
<div id="Register">
  <TopA></TopA>
  <el-row class="re-header">
    <el-col :span="24">
      <el-page-header @back="goBack" content="用户注册" class="header-adjustment">
      </el-page-header>
    </el-col>
  </el-row>
 <el-row type="flex" justify="center" class="adjustment body-box">
   <el-col :span="10">
     <div class="top-box">
       <el-row type="flex" justify="center" align="middle">
         <el-col :span="16">
           <div class="top-box-title">用户注册</div>
         </el-col>
       </el-row>
     </div>
     <el-row type="flex" justify="center" class="form-box">
       <el-col :span="16">
         <el-form label-position="left" :model="form" :rules="rules" ref="form">
           <el-form-item label="用户名" class="form-item-adjustment" prop="name">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
             <el-input type="password" v-model="form.password"></el-input>
           </el-form-item>
           <el-form-item label="确认密码" prop="password">
             <el-input type="password" v-model="form.password_suer"></el-input>
           </el-form-item>
           <el-form-item label="电话" prop="phone">
             <el-input v-model="form.phone"></el-input>
           </el-form-item>
           <el-form-item label="默认交易地址" prop="address">
             <el-input v-model="form.address"></el-input>
           </el-form-item>
         </el-form>
         <div class="adjustment-bottom"><button class="summit-button" v-on:click="submit('form')">注册</button></div>
       </el-col>
     </el-row>
   </el-col>
 </el-row>
</div>
</template>

<script>
import TopA from "./TopA";
export default {
  name: "Register",
  components: {TopA},
  data() {
    return {
      form: {
        name: null,
        password: null,
        password_suer: null,
        phone: null,
        address: null
      },
      rules: {
        name: [
          {required: true, message: "请输入昵称", trigger: "blur"},
          {min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "长度在6个字符以上", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "请输入手机号", trigger: "blur"},
          {min: 11, max: 11, message: "长度需为11个字符", trigger: "blur"}
        ],
        address: [
          {required: true, message: "请输入收货地址", trigger: "blur"},
        ]
      }
    }
  },
  methods: {
    goBack: function () {
      this.$router.push({
        path: '/home_A'
      })
    },
    submit: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.user.insertUser({
            password: this.form.password,
            password_suer: this.form.password_suer,
            phone: this.form.phone,
            transactionAddress: this.form.address,
            username: this.form.name
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: "注册成功",
                type: "success"
              })
              this.$router.push({
                path: '/loginA'
              })
            } else if (res.data.code === 500) {
              this.$message({
                message: res.data.data.password,
                type: "warning"
              });
              this.form.password = null;
            }
          })
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
#Register {

}
.body-box {
  border-radius: 12px;
}
.header-adjustment {
  padding-top: 100px;
}
.adjustment {
 padding-top: 150px;
}
.form-box {
  border: 5px solid #B0E0E6;
  border-radius: 0 0 12px 12px;
}
.top-box {
  height: 60px;
  background: #B0E0E6;
  border-radius: 12px 12px 0 0;
}
.form-item-adjustment {
  padding-top: 20px;
}
.re-header {
  position: fixed;
  z-index: 2000;
}
.summit-button {
  color: white;
  font-size: 24px;
  background: #B0E0E6;
  border-color: #B0E0E6;
  width: 100%;
  height: 60px;
  outline: none;
  border-radius: 12px;
}
.summit-button:hover {
  background: rgba(176, 224, 230, 0.8);
}
.adjustment-bottom {
  padding-bottom: 20px;
}
.top-box-title {
  color: white;
  font-size: 40px;
  font-weight: bold;
}
/deep/ .el-form-item__label {
  font-size: 30px;
}
/deep/ .el-page-header {
  font-size: 24px;
}
/deep/ .el-page-header__title {
  font-size: 36px;
}
/deep/ .el-page-header__content {
  font-size: 36px;
}
/deep/ .el-page-header__left::after {
  height: 40px;
  width: 5px;
  color: #B0E0E6;
}
/deep/ .el-icon-back:before {
 font-size: 30px;
}

</style>
